<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>发送按钮定时器</title>
    <style>
        .container {
            text-align: center;
            margin-top: 50px;
        }
        input[type="text"] {
            padding: 5px;
            width: 200px;
        }
        button {
            padding: 5px 10px;
            margin-left: 10px;
        }
        #timer {
            font-size: 14px;
            color: red;
        }
    </style>
    <script>
        function disableButton() {
            const button = document.getElementById('sendButton');
            const container = document.querySelector('.container');
            
            // 创建一个新的span元素用于显示倒计时
            const timerDisplay = document.createElement('span');
            timerDisplay.id = 'timer';
            timerDisplay.textContent = '(60s后可用)';
            container.appendChild(timerDisplay);

            let timeLeft = 60; // 设置初始时间为60秒

            // 禁用按钮
            button.disabled = true;

            // 开始倒计时
            const countdown = setInterval(() => {
                if (timeLeft > 0) {
                    timeLeft--;
                    timerDisplay.textContent = `(${timeLeft}s后可用)`;
                } else {
                    clearInterval(countdown);
                    button.disabled = false;
                    container.removeChild(timerDisplay);
                }
            }, 1000);
        }
    </script>
</head>
<body>
    <div class="container">
        <input type="text" placeholder="请输入内容">
        <button id="sendButton" onclick="disableButton()">发送</button>
    </div>
</body>
</html>